<template>
	<view class="add bg_color pdd_bottom2">
		<view v-if="!isEnter">
			<view class="tit">
				<view class="text">房屋信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef" :formList="formList" :formData="formData"></Form>
			<view class="tit">
				<view class="text">业主信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef1" :formList="formList1" :formData="formData"></Form>
			<view class="tit" v-if="isTuoGuan">
				<view class="text">托管人信息</view>
				<view class="xing">*</view>
			</view>
			<view class="dangshiren" v-if="isTuoGuan">
				<Form ref="formRef2" :formList="formList2" :formData="formData">
					<template #delete>
						<view class="deleteDang" @click="() => deleteDang()" :style="{ height: '96rpx', lineHeight: '96rpx' }">
							<up-icon size="32rpx" :name="config.getImage('delete')"></up-icon>
							<view class="tex font28">删除托管人</view>
						</view>
					</template>
				</Form>
			</view>
			<view class="xinzen" @click="addDangShiRen" v-if="!isTuoGuan">
				<up-icon size="32rpx" :name="config.getImage('add')"></up-icon>
				<view class="tex font28">新增托管人</view>
			</view>
			<view class="butt font28" @click="addItem">提交</view>
		</view>
		<SubmitState v-else :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
	<up-toast ref="toast"></up-toast>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
	<FuJinSubmitModal :deleteShow="deleteShow1" @confirm="Submit" @close="deleteShow1 = false"></FuJinSubmitModal>
</template>
<script>
import changeData from 'utils/changeData.js';
export const formList0 = [
	{
		label: '名称',
		prop: 'name',
		type: 'text',
		placeholder: '请输入名称',
		rules: [
			{
				required: true,
				message: '请输入标题',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '房屋类别',
		prop: 'houseType',
		type: 'popup',
		placeholder: '请选择房屋类别',
		rules: [
			{
				required: true,
				message: '请选择房屋类别',
				trigger: ['change', 'blur']
			}
		],
		columns: []
	},
	{
		label: '房屋性质',
		prop: 'houseProperty',
		type: 'popup',
		placeholder: '请选择房屋性质',
		rules: [
			{
				required: true,
				message: '请选择房屋性质',
				trigger: ['change', 'blur']
			}
		],
		columns: []
	},
	{
		label: '房屋用途',
		prop: 'housePurpose',
		type: 'popup',
		placeholder: '请选择房屋用途',
		rules: [
			{
				required: true,
				message: '请选择房屋用途',
				trigger: ['change', 'blur']
			}
		],
		columns: []
	},
	{
		label: '房屋结构(选填)',
		prop: 'houseBuild',
		type: 'text',
		placeholder: '请输入房屋结构',
		rules: [
			{
				required: false,
				message: '请输入房屋结构',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '房屋面积/m²(选填)',
		prop: 'houseArea',
		type: 'text',
		placeholder: '请输入房屋面积',
		rules: [
			{
				required: false,
				message: '请输入正确房屋面积',
				pattern: /^[1-9]+\.{0,1}[0-9]{0,2}$/,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '所在地区',
		prop: 'province',
		type: 'picker',
		placeholder: '请选择所在地区',
		rules: [
			{
				required: true,
				message: '请选择所在地区',
				trigger: ['change', 'blur']
			}
		],
		columns: [],
		format: '-'
	},
	{
		label: '详细地址',
		prop: 'place',
		type: 'textarea',
		rules: [
			{
				required: true,
				message: '请输入详细地址',
				trigger: ['change', 'blur']
			}
		],
		placeholder: '请输入详细地址'
	},
	{
		label: '不动产权证书编号(选填)',
		prop: 'realEstateNum',
		type: 'text',
		labelPosition: 'top',
		rules: [
			{
				required: false,
				message: '请输入正确的不动产权证书编号',
				pattern: /^[a-zA-Z0-9]*$/,
				trigger: ['change', 'blur']
			}
		],
		placeholder: '请输入不动产权证书编号'
	}
];
export const formList01 = [
	{
		label: '姓名',
		prop: 'houseName',
		type: 'text',
		placeholder: '请输入姓名',
		rules: [
			{
				required: true,
				message: '请输入姓名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '外文名(选填)',
		prop: 'foreignName',
		type: 'text',
		placeholder: '请输入外文名',
		rules: [
			{
				required: false,
				message: '请输入外文名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '外文姓(选填)',
		prop: 'foreignSurname',
		type: 'text',
		placeholder: '请输入外文姓',
		rules: [
			{
				required: false,
				message: '请输入外文姓',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '证件类型',
		prop: 'cardType',
		type: 'popup',
		placeholder: '请选择证件类型',
		// code: 'card_type',
		rules: [
			{
				required: true,
				message: '请选择证件类型',
				trigger: ['change', 'blur']
			}
		],
		columns: [
			{ name: '身份证', value: '01' },
			{ name: '护照', value: '02' }
		]
	},
	{
		label: '证件号码',
		prop: 'card',
		type: 'text',
		disabled: true,
		placeholder: '请先选择证件类型',
		rules: [
			{
				required: true,
				message: '请输入正确的证件号码',
				validator: changeData.cardRouls,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '联系电话',
		prop: 'phone',
		type: 'text',
		placeholder: '请输入联系电话',
		rules: [
			{
				required: true,
				message: '请输入正确的联系电话',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	}
];

export const formList02 = [
	{
		label: '姓名',
		prop: 'custodianName',
		type: 'text',
		placeholder: '请输入姓名',
		rules: [
			{
				required: true,
				message: '请输入姓名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '外文名(选填)',
		prop: 'custodianForeignName',
		type: 'text',
		placeholder: '请输入外文名',
		rules: [
			{
				required: false,
				message: '请输入外文名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '外文姓(选填)',
		prop: 'custodianForeignSurname',
		type: 'text',
		placeholder: '请输入外文姓',
		rules: [
			{
				required: false,
				message: '请输入外文姓',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '证件类型',
		prop: 'custodianCardType',
		type: 'popup',
		placeholder: '请选择证件类型',
		// code: 'card_type',
		rules: [
			{
				required: true,
				message: '请选择证件类型',
				trigger: ['change', 'blur']
			}
		],
		columns: [
			{ name: '身份证', value: '01' },
			{ name: '护照', value: '02' }
		]
	},
	{
		label: '证件号码',
		prop: 'custodianCard',
		type: 'text',
		disabled: true,
		placeholder: '请先选择证件类型',
		rules: [
			{
				required: true,
				message: '请输入正确的证件号码',
				validator: changeData.cardRouls,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '联系电话',
		prop: 'custodianPhone',
		type: 'text',
		placeholder: '请输入联系电话',
		rules: [
			{
				required: true,
				message: '请输入正确的联系电话',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '与房主关系',
		prop: 'relationship',
		type: 'text',
		placeholder: '请输入与房主关系',
		rules: [
			{
				required: true,
				message: '请输入与房主关系',
				trigger: ['change', 'blur']
			}
		]
	},
	{ type: 'slot', prop: 'delete' }
];
</script>
<script setup>
import config from '@/config.js';
import Form from 'com/Form.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import FuJinSubmitModal from 'com/modal/FuJinSubmitModal.vue';
import Api from 'api';
import changeData from 'utils/changeData.js';
import { dictStore } from 'store/dicts.js';
import { usersStore } from 'store/users.js';
const api = new Api
const store = usersStore();
const store1 = dictStore();
const toast = ref();
const id = ref('');
const formRef = ref(null);
const formRef1 = ref(null);
const formRef2 = ref(null);
const isEnter = ref(false);
const deleteShow = ref(false);
const success = ref('');
const isTuoGuan = ref(false);
const deleteShow1 = ref(false);
const formData = ref({
	name: '',
	houseType: '',
	houseProperty: '',
	housePurpose: '',
	houseBuild: '',
	houseArea: '',
	province: '',
	place: '',
	realEstateNum: '',
	houseName: store.isFuJing() ? '' : store.users.username,
	foreignName: '',
	foreignSurname: '',
	cardType: '',
	card: '',
	phone: store.isFuJing() ? '' : store.users.phone
});
const formList = ref([...formList0]);
const formList1 = ref([...formList01]);
const formList2 = ref([...formList02]);
onLoad(async (query) => {
	const res = await store1.getDict('house_type');
	formList.value.find((item) => item.prop == 'houseType').columns = res;
	const res1 = await store1.getDict('house_property');
	formList.value.find((item) => item.prop == 'houseProperty').columns = res1;
	const res2 = await store1.getDict('house_purpose');
	formList.value.find((item) => item.prop == 'housePurpose').columns = res2;
	// const res3 = await store1.getDict('card_type');
	// formList1.value.find((item) => item.prop == 'cardType').columns = res3;
	// formList2.value.find((item) => item.prop == 'custodianCardType').columns = res3;
	if (query.id) {
		uni.setNavigationBarTitle({
			title: '编辑实有房屋'
		});
		id.value = query.id;
		const res = await api.queryById('baseHouseInfo',{ id: query.id });
		formData.value = res;
	} else {
		uni.setNavigationBarTitle({
			title: '新增实有房屋'
		});
	}

	if (formData.value.custodianName) {
		isTuoGuan.value = true;
	}
});
watch(
	() => formData.value.cardType,
	(newVal, _oldVal) => {
		const find = formList1.value.find((item) => item.prop == 'card');
		getYanZhen(find, newVal);
	}
);
watch(
	() => formData.value.custodianCardType,
	async(newVal, _oldVal) => {
		const find = formList2.value.find((item) => item.prop == 'custodianCard');
		getYanZhen(find, newVal);
	}
);
const getYanZhen = async (find, type) => {
	const res = await api.getRegex({ type });
	let rules;
	if (res == 0) {
		rules = {
			required: true,
			message: '请输入证件号',
			trigger: ['change', 'blur']
		};
	} else if (res == 1) {
		rules = {
			required: true,
			message: '请输入正确的证件号',
			validator: changeData.cardRouls,
			trigger: ['change', 'blur']
		};
	} else {
		rules = {
			required: true,
			message: '请输入正确的证件号',
			pattern: new RegExp(res),
			trigger: ['change', 'blur']
		};
	}
	find.disabled = false;
	find.rules = [rules];
	find.placeholder = '请输入正确的证件号'
};

const fanhui = () => {
	uni.navigateBack();
};
const addDangShiRen = () => {
	isTuoGuan.value = true;
};
const deleteDang = () => {
	deleteShow.value = true;
};
const confirm = () => {
	deleteShow.value = false;
	isTuoGuan.value = false;
	formData.value.custodianName = '';
	formData.value.custodianPhone = '';
	formData.value.custodianForeignName = '';
	formData.value.custodianForeignSurname = '';
	formData.value.custodianCardType = '';
	formData.value.custodianCard = '';
	formData.value.relationship = '';
};
const Submit = async () => {
	deleteShow1.value = false;
	let res = null;
	if (id.value) {
		res = await api.edit('baseHouseInfo', unref(formData));
	} else {
		res = await api.add('baseHouseInfo', unref(formData));
	}
	success.value = res;
	isEnter.value = true;
};

const addItem = () => {
	const mise = new Promise((resolve) => {
		formRef.value.submit(() => {
			resolve();
		});
	});
	const mise1 = new Promise((resolve) => {
		formRef1.value.submit(() => {
			resolve();
		});
	});
	const mise2 = new Promise((resolve) => {
	formRef2.value && formRef2.value.submit(() => {
			resolve();
		});
	});
	let submitPromises = [mise, mise1];
	isTuoGuan.value && submitPromises.push(mise2);
	Promise.all(submitPromises).then(() => {
		const repeat = changeData.findDuplicateCardOrPhone([{custodianCard:formData.value.custodianCard,phone:formData.value.phone},{custodianCard:formData.value.card,phone:formData.value.custodianPhone}],'custodianCard','phone');
				if (repeat) {
					toast.value.show({ show: true, message: repeat.length > 11 ? '托管人证件号码有重复' : '托管人电话号码有重复', type: 'error', position: 'top' });
					return;
				}
		store.isFuJing() ? (deleteShow1.value = true) : Submit();
	});
};
</script>
